<template>
  <div class="app-container"
       style="min-height: 100%"
  >
<!--    v-loading="isLoading"-->
<!--    element-loading-text="拼命上传中..."-->
<!--    element-loading-spinner="el-icon-loading"-->
<!--    element-loading-background="rgba(0, 0, 0, 0.8)"-->
    <el-card class="box-card" style="margin-top: 0px;">
      <div class="text item">
        <el-steps :active="activeIndex" align-center>
          <el-step title="选择考试类型"></el-step>
          <el-step title="核验答案"></el-step>
          <el-step title="导入第三方分值"></el-step>
          <el-step title="科目算分，生成分数表"></el-step>
          <el-step title="抽验答案"></el-step>
          <el-step title="获取考生成绩"></el-step>
        </el-steps>
      </div>
    </el-card>


    <div class="c-content">
      <div v-if="activeIndex==1">
        <select-exam-type :selectType="selectType" @changeType="changeType"></select-exam-type>
      </div>
      <div v-if="activeIndex==2">
        <check-answer></check-answer>
      </div>
      <div v-if="activeIndex==3">
        <import-data></import-data>
      </div>
      <div v-if="activeIndex==4">
        <subject-grade></subject-grade>
      </div>
      <div v-if="activeIndex==5">
        <sample-answer></sample-answer>
      </div>
      <div v-if="activeIndex==6">
        <get-grade></get-grade>
      </div>
    </div>
    <div class="bottom-skip">
      <el-button @click="back()" v-if="activeIndex>1" :style="activeIndex<6?'float: left;':'float: right;'">返回</el-button>
      <el-button @click="next()" v-if="activeIndex<6" style="float: right;">下一步</el-button>
    </div>
    <el-dialog
      width="80%"
      :visible.sync="isLoading"
      class="progress-dialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-progress class="excel" :text-inside="true" :stroke-width="20" :percentage="percentage"></el-progress>
    </el-dialog>
  </div>
</template>

<script>
  import Cookies from "js-cookie";
  import selectExamType from "@/components/ToolSystem/Grade/selectExamType"
  import checkAnswer from "@/components/ToolSystem/Grade/checkAnswer"
  import importData from "@/components/ToolSystem/Grade/importData"
  import subjectGrade from "@/components/ToolSystem/Grade/subjectGrade"
  import sampleAnswer from "@/components/ToolSystem/Grade/sampleAnswer"
  import getGrade from "@/components/ToolSystem/Grade/getGrade"
  import {OneNext, TwoNext, ThreeNext, FourNext, fiveNext} from "@/api/toolsystem/grade";
  export default {
    name: "GradeList",
    components:{
      selectExamType,
      checkAnswer,
      importData,
      subjectGrade,
      sampleAnswer,
      getGrade
    },
    data(){
      return{
        activeIndex: 1,
        // 是否禁用上传
        isLoading: this.$root.globalDialog, // dialog显示隐藏
        percentage: this.$root.percentage, // 上传进度
        selectType: null
      }
    },
    created() {
      const grade_activeIndex = Number(Cookies.get("tool_system_grade_activeIndex"))
      if(grade_activeIndex){
        this.activeIndex = grade_activeIndex
      }else {
        this.activeIndex = 1
        Cookies.set("tool_system_grade_activeIndex", 1);
      }
      const type = Cookies.get("tool_system_grade_selectExam");
      if(type){
        this.selectType = Number(type);
      }
    },
    methods:{
      changeType(val){
        this.selectType = val;
      },
      // 下一步
      next(){
        if(this.activeIndex == 1){
          const selectExam = Cookies.get("tool_system_grade_selectExam");
          if(selectExam==undefined){
            return this.msgInfo('请选择考试类型并确认提交')
          }
          if(selectExam != this.selectType){
            return this.msgInfo('请并确认提交所选择的考试类型')
          }
          OneNext()
        }else if(this.activeIndex == 2){
          TwoNext()
        }else if(this.activeIndex == 3){
          ThreeNext()
        }else if(this.activeIndex == 4){
          FourNext()
        }else if(this.activeIndex == 5){
          fiveNext()
        }
        this.activeIndex += 1
      },
      // 返回
      back(){
        this.activeIndex -= 1
      },
    },
    watch:{
      activeIndex(value){
        this.activeIndex = value
        Cookies.set("tool_system_grade_activeIndex", value);
      },
      '$root.globalDialog'(val){
        console.log(val)
        this.isLoading = val
      },
      '$root.percentage'(val){
        console.log(val)
        this.percentage = val
      }
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  @import "@/assets/styles/step.scss";
  .progress-dialog{
    background-color: rgba(0, 0, 0, 0.6);
    .el-dialog{
      margin: 0 !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .el-dialog__header{
      padding: 0;
      padding-bottom: 0;
      .el-icon-close:before{
        content: "";
      }
    }
  }
  .bottom-skip{
    height: 46px;
    .el-button{
      color: #fff;
      background-color: #563279;
      border-color: #563279;
    }
  }
</style>
